<script setup lang="ts">
import { ref } from 'vue';
import img_1 from './images/首页展示.png'
import img_2 from './images/首页展示_un.png'
import img_3 from './images/申请入口.png'
import img_4 from './images/申请入口_un.png'
import img_5 from './images/业务发布.png'
import img_6 from './images/业务发布_un.png'
import img_7 from './images/个人中心.png'
import img_8 from './images/个人中心_un.png'
const active = ref(0);
const icon = {
    active: '',
    inactive: '',
};

</script>

<template>
    <router-view/>
    <van-sticky :offset-bottom="0" position="bottom">
  <div class="tabbarBox" >
      <div class="Box">
          <van-tabbar v-model="active" active-color="#ee0a24"  safe-area-inset-bottom route>
                <div class="icons">
                    <van-tabbar-item  to="/home" >
                            <span>首页展示</span>
                            <template #icon="props">
                                <img :src="props.active ? img_1 : img_2" />
                            </template>
                    </van-tabbar-item>
                    <van-tabbar-item  to="/ApplyForSQ"  >
                        <span>申请中心</span>
                        <template #icon="props">
                            <img :src="props.active ? img_3 : img_4" />
                        </template>
                    </van-tabbar-item>
                    <van-tabbar-item  to="/ServiceReleaseArea">
                        <span>业务发布</span>
                        <template #icon="props">
                            <img :src="props.active ? img_5 : img_6" />
                        </template>
                    </van-tabbar-item>
                    <van-tabbar-item  to="/personalCenter" >
                        <span>个人中心</span>
                        <template #icon="props">
                            <img :src="props.active ? img_7 : img_8" />
                        </template>
                    </van-tabbar-item>
                </div>
            </van-tabbar>
        </div>
    </div>
    </van-sticky>

</template>

<style scoped lang="less">
:deep(.van-tabbar--fixed) {
    position: fixed;
    bottom: -1px;
    left: 0;
}

//:deep(.van-tabbar--fixed) {
//    position: static;
//    bottom: 0;
//    left: 0;
//}
.tabbarBox {
//padding-top: 12px;
//position: relative;
//    width: 375px;
    //height: 667px;
    overflow: hidden;
}
.Box {
//position: absolute;
//height: 83px;
    width: 375px;
    //padding-top: 5px;
    background-color: #ffffff;
    overflow: hidden;
    .icons {
        background-color: #ffffff;

        display: flex;
        justify-content: space-around;
        margin-top: 12px;
        width:375px;
        .iconBox {
            height: 44px;
            margin-bottom: 18px;
            .iconImg{
                width: 21px;
                height: 21px;
                margin: 0 auto;
                img {
                    width: 100%;
                }
            }
            .iconText {
                margin-top: 10px;
                font-size: 13px;
            }
        }
    }

}
</style>